<!--
 * @Author: Yang Zhang
 * @Date: 2021-12-03 00:09:20
 * @LastEditors: Yang Zhang
 * @LastEditTime: 2021-12-29 23:13:02
 * @Description: 
-->
<template>
  <div class="editWrap">
    <div class="title">Let's do this! Create your Interestore.</div>
    <div class="bottom-info">
      <div class="btm-title logo" style="margin-top: 0;">
        <span class="xing">*</span>Logo
      </div>
      <div class="flex">
        <a-upload
          v-model:file-list="fileList"
          name="file"
          list-type="picture-card"
          class="avatar-uploader"
          :class="[imageUrl ? 'uploaderwrap' : '']"
          :headers="headers"
          :show-upload-list="false"
          action="https://www.intere.store/common/upload/file"
          :before-upload="beforeUpload"
          @change="handleChange"
        >
          <div class="imgwrap" v-if="imageUrl">
            <img :src="imageUrl" alt="avatar" style="border-radius: 50%;" />
            <div class="btntip">Re-upload</div>
          </div>
          <div v-else>
            <loading-outlined v-if="loading"></loading-outlined>
            <plus-outlined v-else></plus-outlined>
          </div>
        </a-upload>
        <div class="linkbtns flex-v-c">
          <div class="reupload linkbtn" @click.stop="deleteUploadimg">Delete</div>
        </div>
      </div>
      <div class="btm-title storename">
        <span class="xing">*</span>Store name
      </div>
      <a-input v-model:value="storename" placeholder="Store Name" />
      <div class="smdes">recommend use your social mdia name</div>
      <img src="@/assets/Index/edit/edit1.png" class="img" />
      <div class="btm-title intro">
        <span class="xing">*</span>Store introduction
      </div>
      <a-input v-model:value="storeintroduction" placeholder="Store Introduction" />
      <div class="smdes second">Short and interesting introduction</div>
      <div class="btm-title media">
        <span class="xing">*</span>Social media
      </div>
      <div class="linklist">
        <div class="linkitem" :class="actlink === 'facebook'? 'active':''" @click="choselink('facebook')">
          <svg t="1640790236988" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1042" width="200" height="200"><path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512V640h-128v-128h128v-96c0-89.6 70.4-160 160-160h160v128H672c-19.2 0-32 12.8-32 32v96h176l-32 128h-144v368c220.8-57.6 384-256 384-496C1024 230.4 793.6 0 512 0z" fill="#3C60AC" p-id="1043"></path></svg>
        </div>
        <div class="linkitem" :class="actlink === 'instargram'? 'active':''" @click="choselink('instargram')">
          <svg t="1640790343225" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1327" width="200" height="200"><path d="M548.8 1024h-73.6C214.4 1024 0 809.6 0 548.8v-73.6C0 212.8 214.4 0 475.2 0h73.6C811.2 0 1024 212.8 1024 475.2v73.6C1024 809.6 809.6 1024 548.8 1024z" fill="#E55590" p-id="1328"></path><path d="M510.4 377.6c-75.2 0-136 60.8-136 136s60.8 136 136 136 136-60.8 136-136-60.8-136-136-136z m0 224c-49.6 0-88-40-88-88s40-88 88-88 88 40 88 88-40 88-88 88z m262.4-204.8c0-83.2-65.6-147.2-147.2-147.2 0 0-59.2-1.6-115.2-1.6s-113.6 1.6-113.6 1.6c-83.2 0-150.4 67.2-150.4 150.4 0 0-1.6 52.8-1.6 107.2 0 59.2 1.6 120 1.6 120 0 83.2 67.2 150.4 150.4 150.4 0 0 52.8 1.6 107.2 1.6 59.2 0 121.6-1.6 121.6-1.6 83.2 0 147.2-65.6 147.2-147.2 0 0 1.6-59.2 1.6-116.8 0-59.2-1.6-116.8-1.6-116.8z m-46.4 222.4c0 67.2-41.6 110.4-110.4 110.4 0 0-62.4 1.6-110.4 1.6-44.8 0-99.2-1.6-99.2-1.6-67.2 0-112-43.2-112-112 0 0-1.6-60.8-1.6-108.8 0-44.8 1.6-102.4 1.6-102.4 0-67.2 43.2-110.4 112-110.4 0 0 57.6-1.6 104-1.6s105.6 1.6 105.6 1.6c67.2 0 110.4 41.6 110.4 110.4 0 0 1.6 59.2 1.6 104 0 48-1.6 108.8-1.6 108.8z m-73.6-280c-17.6 0-32 14.4-32 32s14.4 32 32 32 32-14.4 32-32-14.4-32-32-32z" fill="#FFFFFF" p-id="1329"></path></svg>
        </div>
        <div class="linkitem" :class="actlink === 'twitter'? 'active':''" @click="choselink('twitter')">
          <svg t="1640790368488" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1470" width="200" height="200"><path d="M548.8 0h-75.2C214.4 0 0 214.4 0 475.2v75.2C0 809.6 214.4 1024 475.2 1024h75.2C809.6 1024 1024 809.6 1024 548.8v-75.2C1024 214.4 809.6 0 548.8 0z m177.6 404.8v14.4c0 148.8-112 321.6-321.6 321.6-65.6 0-121.6-19.2-172.8-51.2h27.2c51.2 0 102.4-19.2 139.2-46.4-51.2 0-88-32-107.2-78.4h24c9.6 0 19.2 0 27.2-4.8-51.2-9.6-88-56-88-112 14.4 9.6 32 14.4 51.2 14.4-27.2-19.2-46.4-51.2-46.4-92.8 0-19.2 4.8-41.6 14.4-56 56 70.4 139.2 112 232 116.8 0-9.6-4.8-19.2-4.8-24 0-60.8 51.2-112 112-112 32 0 60.8 14.4 83.2 36.8 24-4.8 51.2-14.4 70.4-27.2-9.6 27.2-27.2 46.4-51.2 60.8 24-4.8 46.4-9.6 65.6-19.2-12.8 22.4-32 40-54.4 59.2z" fill="#449FDE" p-id="1471"></path></svg>
        </div>
        <div class="linkitem" :class="actlink === 'youtube'? 'active':''" @click="choselink('youtube')">
          <svg t="1640790403130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1612" width="200" height="200"><path d="M547.943838 1022.402496h-73.48518C214.065523 1022.402496 0 809.934477 0 547.943838v-73.48518C0 214.065523 214.065523 0 474.458658 0h73.48518C808.336973 0 1022.402496 214.065523 1022.402496 474.458658v73.48518c0 261.99064-214.065523 474.458658-474.458658 474.458658z" fill="#DD1829" p-id="1613"></path><path d="M792.361934 377.01092c-12.780031-41.535101-22.365055-63.900156-63.900156-68.692667 0 0-110.227769-6.390016-220.455538-6.390016-108.630265 0-217.26053 6.390016-217.26053 6.390016-43.132605 4.792512-54.315133 28.75507-65.49766 68.692667 0 0-11.182527 63.900156-11.182527 127.800312 0 65.49766 11.182527 132.592824 11.182527 132.592824 7.98752 38.340094 27.157566 63.900156 65.49766 68.692668 0 0 119.812793 7.98752 234.833073 7.987519 103.837754 0 202.882995-7.98752 202.882995-7.987519 38.340094-7.98752 52.717629-27.157566 63.900156-68.692668 0 0 11.182527-60.705148 11.182528-124.605304 0-67.095164-11.182527-135.787832-11.182528-135.787832zM450.4961 618.234009V397.778471l169.335413 110.227769-169.335413 110.227769z" fill="#FFFFFF" p-id="1614"></path></svg>
        </div>
        <div class="linkitem" :class="actlink === 'tiktok'? 'active':''" @click="choselink('tiktok')">
          <svg t="1640790418790" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1755" width="200" height="200"><path d="M0 512c0 283.2 228.8 512 512 512s512-228.8 512-512S795.2 0 512 0 0 228.8 0 512z" fill="#170B1A" p-id="1756"></path><path d="M512 324.8V153.6h116.8c0 9.6 1.6 20.8 3.2 30.4h-86.4v464c0 19.2-4.8 40-14.4 56-14.4 25.6-43.2 44.8-73.6 46.4-19.2 1.6-38.4-1.6-56-11.2-12.8-6.4-24-17.6-33.6-28.8 30.4 16 68.8 16 97.6-3.2 27.2-17.6 46.4-49.6 46.4-83.2V324.8z m192-32c16 9.6 33.6 17.6 52.8 22.4 11.2 3.2 22.4 3.2 33.6 3.2v25.6c-33.6-8-64-25.6-86.4-51.2z" fill="#25F4EE" p-id="1757"></path><path d="M300.8 438.4c41.6-25.6 92.8-36.8 140.8-30.4v27.2c-12.8 0-25.6 1.6-38.4 4.8-32 6.4-60.8 19.2-86.4 38.4-27.2 20.8-49.6 49.6-64 80-14.4 30.4-20.8 62.4-20.8 96 0 36.8 9.6 72 27.2 104 8 14.4 17.6 28.8 28.8 40-25.6-17.6-44.8-40-60.8-67.2-20.8-35.2-30.4-75.2-30.4-116.8 1.6-36.8 12.8-73.6 32-107.2 19.2-27.2 43.2-51.2 72-68.8z" fill="#25F4EE" p-id="1758"></path><path d="M545.6 184h86.4c3.2 16 9.6 32 16 48 12.8 24 28.8 43.2 51.2 57.6 1.6 1.6 3.2 1.6 3.2 3.2 22.4 25.6 52.8 44.8 88 52.8v91.2c-57.6 0-113.6-17.6-160-51.2v248c-3.2 35.2-12.8 70.4-32 100.8-14.4 27.2-35.2 49.6-60.8 68.8-32 24-70.4 36.8-110.4 38.4-20.8 1.6-40-1.6-60.8-4.8-27.2-6.4-54.4-17.6-76.8-33.6V800c-11.2-12.8-20.8-25.6-28.8-40-17.6-32-27.2-67.2-27.2-104 0-33.6 6.4-65.6 20.8-96 14.4-32 36.8-59.2 64-80 36.8-27.2 80-41.6 126.4-43.2V529.6c-14.4-4.8-30.4-4.8-46.4-1.6-17.6 3.2-35.2 12.8-49.6 24-8 8-16 16-20.8 27.2-9.6 17.6-12.8 36.8-9.6 56 1.6 19.2 9.6 36.8 22.4 51.2 8 9.6 19.2 17.6 28.8 24 8 12.8 19.2 22.4 33.6 28.8 17.6 9.6 36.8 12.8 56 11.2 30.4-1.6 59.2-20.8 73.6-46.4 9.6-17.6 14.4-36.8 14.4-56-1.6-155.2-1.6-308.8-1.6-464z" fill="#FFFFFF" p-id="1759"></path><path d="M632 184h30.4c0 33.6 11.2 67.2 30.4 96 3.2 3.2 4.8 6.4 8 9.6-22.4-14.4-40-33.6-51.2-57.6-8-16-14.4-32-17.6-48z m158.4 160c11.2 3.2 22.4 3.2 33.6 3.2v118.4c-57.6 0-115.2-17.6-161.6-52.8v233.6c0 17.6-1.6 35.2-4.8 52.8-11.2 52.8-41.6 99.2-86.4 131.2-22.4 16-49.6 28.8-76.8 33.6-33.6 8-68.8 6.4-100.8-1.6-40-9.6-75.2-32-102.4-62.4 24 16 49.6 27.2 76.8 33.6 19.2 4.8 40 4.8 60.8 4.8 40-1.6 78.4-14.4 110.4-38.4 24-17.6 44.8-41.6 60.8-68.8 17.6-30.4 28.8-65.6 32-100.8v-28.8-219.2c46.4 33.6 102.4 51.2 160 51.2-1.6-27.2 0-59.2-1.6-89.6z" fill="#FE2C55" p-id="1760"></path><path d="M443.2 435.2c11.2 0 22.4 0 33.6 1.6v121.6c-16-4.8-33.6-6.4-51.2-1.6-32 8-59.2 30.4-70.4 62.4-11.2 30.4-6.4 65.6 12.8 91.2-11.2-6.4-20.8-14.4-28.8-24-12.8-14.4-20.8-32-22.4-51.2-1.6-19.2 1.6-40 9.6-56 4.8-9.6 12.8-19.2 20.8-27.2 14.4-12.8 32-19.2 49.6-24 14.4-3.2 32-3.2 46.4 1.6v-59.2-35.2z" fill="#FE2C55" p-id="1761"></path></svg>
        </div>
        <div class="linkitem" :class="actlink === 'snapchat'? 'active':''" @click="choselink('snapchat')">
          <svg t="1640790448697" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1902" width="200" height="200"><path d="M1020.8 510.4c0 92.8-22.4 177.6-68.8 256-44.8 76.8-108.8 140.8-185.6 185.6-78.4 44.8-166.4 68.8-256 68.8s-179.2-22.4-256-68.8c-76.8-44.8-140.8-108.8-185.6-185.6C22.4 688 0 600 0 510.4c0-92.8 22.4-177.6 68.8-256 44.8-76.8 108.8-140.8 185.6-185.6C331.2 22.4 420.8 0 510.4 0c92.8 0 177.6 22.4 256 68.8 76.8 44.8 140.8 108.8 185.6 185.6 46.4 76.8 68.8 166.4 68.8 256z" fill="#FFFC00" p-id="1903"></path><path d="M516.8 177.6c-91.2 0-153.6 38.4-188.8 113.6-6.4 14.4-11.2 36.8-11.2 65.6v16l3.2 67.2h-3.2c-4.8 0-9.6-1.6-12.8-3.2l-6.4-1.6c-6.4-3.2-14.4-4.8-22.4-4.8-11.2 0-20.8 3.2-28.8 9.6-9.6 6.4-14.4 16-14.4 27.2s4.8 20.8 16 28.8c6.4 4.8 14.4 9.6 22.4 12.8l8 3.2c9.6 3.2 19.2 6.4 27.2 11.2 6.4 3.2 9.6 8 9.6 11.2v3.2l-1.6 6.4-1.6 4.8c-27.2 59.2-68.8 94.4-126.4 107.2-12.8 3.2-19.2 11.2-19.2 24v4.8c3.2 20.8 32 35.2 83.2 44.8l9.6 1.6v4.8l1.6 8c1.6 9.6 4.8 17.6 9.6 22.4 4.8 6.4 11.2 8 20.8 8 4.8 0 9.6 0 17.6-1.6l8-1.6c8-1.6 16-3.2 25.6-3.2 14.4 0 28.8 3.2 41.6 9.6 9.6 4.8 19.2 9.6 27.2 16l8 4.8c9.6 8 24 16 40 22.4 16 6.4 33.6 11.2 52.8 11.2 19.2 0 38.4-3.2 54.4-11.2 12.8-4.8 22.4-11.2 32-16l8-6.4c9.6-8 20.8-14.4 33.6-20.8s27.2-9.6 41.6-9.6h4.8l12.8 1.6 8 1.6c11.2 1.6 20.8 3.2 27.2 3.2 9.6 0 16-3.2 20.8-9.6 3.2-4.8 4.8-9.6 6.4-16l4.8-19.2 1.6-3.2c59.2-6.4 91.2-22.4 91.2-48 0-12.8-6.4-20.8-19.2-24-27.2-6.4-54.4-19.2-75.2-38.4-22.4-19.2-40-43.2-51.2-68.8l-3.2-9.6c0-1.6-1.6-3.2-1.6-4.8 0-4.8 3.2-8 9.6-11.2 4.8-3.2 11.2-6.4 17.6-8l9.6-3.2c11.2-3.2 20.8-8 30.4-14.4 9.6-6.4 16-17.6 16-28.8s-4.8-19.2-14.4-25.6c-8-6.4-19.2-9.6-28.8-9.6-6.4 0-11.2 1.6-16 3.2l-12.8 4.8c-3.2 1.6-8 3.2-12.8 3.2h-1.6l3.2-57.6v-12.8c0-35.2-3.2-62.4-11.2-78.4-14.4-33.6-40-62.4-70.4-83.2-36.8-22.4-73.6-33.6-110.4-33.6z" fill="#FFFFFF" p-id="1904"></path><path d="M516.8 177.6c-91.2 0-153.6 38.4-188.8 113.6-6.4 14.4-11.2 36.8-11.2 65.6v16l3.2 67.2h-3.2c-4.8 0-9.6-1.6-12.8-3.2l-6.4-1.6c-6.4-3.2-14.4-4.8-22.4-4.8-11.2 0-20.8 3.2-28.8 9.6-9.6 6.4-14.4 16-14.4 27.2s4.8 20.8 16 28.8c6.4 4.8 14.4 9.6 22.4 12.8l8 3.2c9.6 3.2 19.2 6.4 27.2 11.2 6.4 3.2 9.6 8 9.6 11.2v3.2l-1.6 6.4-1.6 4.8c-27.2 59.2-68.8 94.4-126.4 107.2-12.8 3.2-19.2 11.2-19.2 24v4.8c3.2 20.8 32 35.2 83.2 44.8l9.6 1.6v4.8l1.6 8c1.6 9.6 4.8 17.6 9.6 22.4 4.8 6.4 11.2 8 20.8 8 4.8 0 9.6 0 17.6-1.6l8-1.6c8-1.6 16-3.2 25.6-3.2 14.4 0 28.8 3.2 41.6 9.6 9.6 4.8 19.2 9.6 27.2 16l8 4.8c9.6 8 24 16 40 22.4 16 6.4 33.6 11.2 52.8 11.2 19.2 0 38.4-3.2 54.4-11.2 12.8-4.8 22.4-11.2 32-16l8-6.4c9.6-8 20.8-14.4 33.6-20.8s27.2-9.6 41.6-9.6h4.8l12.8 1.6 8 1.6c11.2 1.6 20.8 3.2 27.2 3.2 9.6 0 16-3.2 20.8-9.6 3.2-4.8 4.8-9.6 6.4-16l4.8-19.2 1.6-3.2c59.2-6.4 91.2-22.4 91.2-48 0-12.8-6.4-20.8-19.2-24-27.2-6.4-54.4-19.2-75.2-38.4-22.4-19.2-40-43.2-51.2-68.8l-3.2-9.6c0-1.6-1.6-3.2-1.6-4.8 0-4.8 3.2-8 9.6-11.2 4.8-3.2 11.2-6.4 17.6-8l9.6-3.2c11.2-3.2 20.8-8 30.4-14.4 9.6-6.4 16-17.6 16-28.8s-4.8-19.2-14.4-25.6c-8-6.4-19.2-9.6-28.8-9.6-6.4 0-11.2 1.6-16 3.2l-12.8 4.8c-3.2 1.6-8 3.2-12.8 3.2h-1.6l3.2-57.6v-12.8c0-35.2-3.2-62.4-11.2-78.4-14.4-33.6-40-62.4-70.4-83.2-36.8-22.4-73.6-33.6-110.4-33.6z m0 12.8c36.8 0 68.8 9.6 97.6 27.2 28.8 19.2 51.2 44.8 65.6 78.4 6.4 12.8 9.6 33.6 11.2 60.8v16l-3.2 60.8v12.8l4.8 6.4c3.2 1.6 6.4 1.6 9.6 1.6 4.8 0 11.2-1.6 16-3.2l6.4-3.2c6.4-3.2 12.8-4.8 19.2-4.8 8 0 16 3.2 22.4 8 6.4 4.8 9.6 9.6 9.6 16 0 8-3.2 14.4-9.6 19.2-8 6.4-17.6 9.6-25.6 12.8-11.2 3.2-20.8 6.4-30.4 11.2-11.2 6.4-16 12.8-16 22.4 0 3.2 1.6 9.6 4.8 19.2 12.8 28.8 32 54.4 54.4 73.6 24 20.8 51.2 33.6 81.6 40 6.4 1.6 9.6 4.8 9.6 11.2 0 16-28.8 28.8-86.4 38.4-4.8 4.8-6.4 9.6-8 16l-1.6 4.8c-1.6 6.4-3.2 12.8-6.4 17.6-1.6 3.2-4.8 3.2-9.6 3.2h-4.8l-12.8-1.6-8-1.6c-9.6-1.6-17.6-3.2-27.2-3.2-16 0-32 3.2-48 11.2-9.6 4.8-19.2 9.6-28.8 16l-8 6.4c-11.2 8-24 16-36.8 20.8-16 6.4-33.6 9.6-49.6 9.6-17.6 0-33.6-3.2-48-9.6-9.6-4.8-19.2-9.6-28.8-16l-8-4.8c-11.2-9.6-24-16-36.8-22.4-20.8-9.6-43.2-12.8-65.6-9.6l-16 3.2-11.2 1.6h-4.8c-4.8 0-8-1.6-11.2-3.2-3.2-3.2-4.8-8-4.8-11.2l-4.8-19.2-1.6-3.2-22.4-4.8c-46.4-11.2-67.2-24-67.2-36.8 0-6.4 3.2-9.6 9.6-11.2 60.8-12.8 107.2-51.2 136-115.2l3.2-9.6c1.6-3.2 1.6-6.4 1.6-9.6 0-9.6-6.4-17.6-16-22.4-9.6-4.8-19.2-9.6-30.4-11.2-9.6-1.6-19.2-6.4-25.6-12.8-6.4-4.8-9.6-11.2-9.6-19.2 0-6.4 3.2-11.2 9.6-16 6.4-4.8 14.4-6.4 22.4-6.4 3.2 0 6.4 1.6 11.2 3.2l6.4 1.6c9.6 3.2 17.6 4.8 24 4.8 4.8 0 8 0 12.8-1.6l3.2-6.4-3.2-64v-12.8c0-33.6 3.2-59.2 11.2-73.6 28.8-70.4 86.4-105.6 172.8-105.6z" fill="#030303" p-id="1905"></path></svg>
        </div>
      </div>
      <a-input
        ref="antinput"
        @blur="onBlur"
        v-model:value="storeurl"
        @focus.stop="changeInput"
        :placeholder="`your ${actlink} media URL`"
      >
        <template #addonAfter>
          <div class="btn" style="cursor: pointer;" @click.stop="confirmUrl">CONFIRM</div>
        </template>
      </a-input>
      <div class="smdes third">Click on the icon and write your social media link</div>
      <div class="btm-title">
        <span class="xing">*</span>What is your field?
      </div>
      <a-select ref="select" v-model:value="filed">
        <a-select-option v-for="item in filedslst" :value="item.id">{{ item.fieldName }}</a-select-option>
      </a-select>
      <div class="smdes fourth">Short and interesting introduction</div>
      <div class="kol-btn kol-btn-primary editBtn" @click.stop="submit">Save</div>
    </div>
    <img src="@/assets/Index/edit/edit2.png" class="rightBigimg" />
    <img src="@/assets/Index/edit/edit3.png" class="edit3" />
    <div class="allhere">They are all here</div>
    <div class="int">
      <div>Your logo</div>
      <div>Storename</div>
      <div>Your field</div>
      <div>Your social media</div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs, onBeforeMount, onMounted, ref, toRaw, computed, watch } from 'vue'
interface DataProps { }
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { FileInfo, FileItem, ICategory, IField, ILogininfo } from '../../types';
import { updateStoreInfo } from '../../../api/home';
import { useStore } from 'vuex';
import { getStorageItem } from '../../../utils/utils';
import { useRouter } from 'vue-router';
import { getNavlist } from '../../../api/product';
import { IStoreinfo } from '../../../api/types';
const store = useStore()
const router = useRouter()
const logininfo = ref({} as ILogininfo)
// 初始化是否回显的数据
const initData = () => {
  logininfo.value = getStorageItem('loginUserinfo')
  if (logininfo.value) {
    console.log(logininfo.value)
    imageUrl.value = logininfo.value.storeLogo
    storename.value = logininfo.value.storeName
    storeintroduction.value = logininfo.value.storeDesc
    filed.value = logininfo.value.storeField
    realStoreInfo.value.facebookUrl = logininfo.value.facebookUrl || ''
    realStoreInfo.value.instargramUrl = logininfo.value.instargramUrl || ''
    realStoreInfo.value.twitterUrl = logininfo.value.twitterUrl || ''
    realStoreInfo.value.youtubeUrl = logininfo.value.youtubeUrl || ''
    realStoreInfo.value.tiktokUrl = logininfo.value.tiktokUrl || ''
    realStoreInfo.value.snapchatUrl = logininfo.value.snapchatUrl || ''
  }
}

const antinput = ref()
const blurPoint = () => {
  console.log('123')
}
// 输入框获取焦点  这里单独写样式因为设计的原因，别的地方input的组件的输入状态
const changeInput = () => {
  linkblur.value = true
}




// const disable = ref(true)
onMounted(() => {
  initData()
})

const disable = computed(() => {
  return Boolean(imageUrl.value && storename.value && storeintroduction.value && filed.value && (realStoreInfo.value.facebookUrl || realStoreInfo.value.instargramUrl || realStoreInfo.value.twitterUrl || realStoreInfo.value.youtubeUrl || realStoreInfo.value.tiktokUrl || realStoreInfo.value.snapchatUrl))
})


function getBase64(img: Blob, callback: (base64Url: string) => void) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result as string));
  reader.readAsDataURL(img);
}
const fileList = ref([]);
const loading = ref<boolean>(false);
const imageUrl = ref<string>('');

const headers = {
  accessToken: store.state.user.accessToken || getStorageItem('accessToken')
}
// 当前选择的社交账号类型
const choselink = (linktype: string) => {
  actlink.value = linktype
  linkblur.value = true
  if (actlink.value === 'facebook') {
    storeurl.value = logininfo.value.facebookUrl
  } else if (actlink.value === 'instargram') {
    storeurl.value = logininfo.value.instargramUrl
  } else if (actlink.value === 'twitter') {
    storeurl.value = logininfo.value.twitterUrl
  } else if (actlink.value === 'youtube') {
    storeurl.value = logininfo.value.youtubeUrl
  } else if (actlink.value === 'tiktok') {
    storeurl.value = logininfo.value.tiktokUrl
  } else {
    storeurl.value = logininfo.value.snapchatUrl
  }
}

const linkblur = ref(false)
const actlink = ref('Social')


watch(() => linkblur.value,
  (newval, old) => {
    console.log('newval', newval)
    if (newval) {
      antinput.value.focus()
    }
  }
)
const onBlur = () => {
  linkblur.value = false
}

const confirmUrl = () => {
  if (actlink.value === 'facebook') {
    realStoreInfo.value.facebookUrl = storeurl.value
  } else if (actlink.value === 'instargram') {
    realStoreInfo.value.instargramUrl = storeurl.value
  } else if (actlink.value === 'twitter') {
    realStoreInfo.value.twitterUrl = storeurl.value
  } else if (actlink.value === 'youtube') {
    realStoreInfo.value.youtubeUrl = storeurl.value
  } else if (actlink.value === 'tiktok') {
    realStoreInfo.value.tiktokUrl = storeurl.value
  } else {
    realStoreInfo.value.snapchatUrl = storeurl.value
  }
  message.success(`您已成功添加${actlink.value}链接`)
  storeurl.value = ''
  actlink.value = ''
  linkblur.value = false
}

const handleChange = (info: FileInfo) => {
  if (info.file.status === 'uploading') {
    loading.value = true;
    return;
  }
  if (info.file.status === 'done') {
    // Get this url from response in real world.
    const res: any = info.file.response
    console.log(res.result)
    imageUrl.value = res.result
  }
  if (info.file.status === 'error') {
    loading.value = false;
    message.error('upload error');
  }
};

const beforeUpload = (file: FileItem) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
};



// 要提交的一些数据
const storename = ref('')
const storeurl = ref('')
const storeintroduction = ref('')
const filed = ref('')

const realStoreInfo = ref<IStoreinfo>({})

const submit = async () => {
  if (disable.value) {
    realStoreInfo.value.storeLogo = imageUrl.value || ''
    realStoreInfo.value.storeName = storename.value || ''
    realStoreInfo.value.storeDesc = storeintroduction.value || ''
    realStoreInfo.value.storeField = filed.value || ''
    console.log(realStoreInfo.value)
    const res = await updateStoreInfo(realStoreInfo.value)
    console.log(res)
    if (res) {
      message.success('成功')
      router.push('/kol')
    }
  } else {
    message.error('Please fill out')
  }
}


// fileds相关
const filedslst = ref<IField[]>([])
const getFiledslstdata = async () => {
  const res = await getNavlist(0)
  if (res) {
    filedslst.value = res.result
  }
}
onMounted(() => {
  getFiledslstdata()
})


const deleteUploadimg = () => {
  imageUrl.value = ''
  fileList.value = []
  loading.value = false
}


</script>
<style lang='scss'>
.editWrap {
  width: 1598px;
  background-color: #fff;
  margin-top: 20px;
  position: relative;
  .ant-upload-picture-card-wrapper.avatar-uploader {
    width: 110px;
    height: 110px;
  }
  .linkbtns {
    margin-left: 35px;
    .linkbtn {
      font-size: 14px;
      font-family: Galvji;
      font-weight: 400;
      text-decoration: underline;
      color: #e60044;
      margin-right: 24px;
      cursor: pointer;
    }
  }
  .ant-upload.ant-upload-select-picture-card {
    img {
      width: 110px;
      height: 110px;
      // border-radius: 50%;
    }
  }
  .rightBigimg {
    width: 796px;
    height: 1095px;
    position: absolute;
    right: 0;
    top: 398px;
  }
  .edit3 {
    width: 302px;
    height: 341px;
    position: absolute;
    right: 360px;
    top: 241px;
  }
  .allhere {
    width: 265px;
    height: 32px;
    font-size: 30px;
    font-family: Chalkboard SE;
    font-weight: bold;
    color: #e60044;
    line-height: 30px;
    position: absolute;
    right: 44px;
    top: 483px;
  }
  .int {
    height: 130px;
    font-size: 30px;
    font-family: Chalkboard SE;
    font-weight: 400;
    color: #000000;
    line-height: 36px;
    position: absolute;
    top: 200px;
    right: 139px;
  }
  .title {
    font-size: 24px;
    font-family: Galvji;
    font-weight: bold;
    color: #000000;
    height: 102px;
    line-height: 102px;
    padding-left: 67px;
    border-bottom: 1px solid #e0e0e0;
  }
  .bottom-info {
    width: 100%;
    padding: 59px 70px;
    .btm-title {
      font-size: 18px;
      font-family: Galvji;
      font-weight: bold;
      color: rgba(0, 0, 0, 1);
    }
    .btm-title.storename {
      margin-top: 60px;
      margin-bottom: 20px;
    }
    .btm-title.logo {
      margin-top: 0;
      margin-bottom: 25px;
    }

    .btm-title.intro {
      margin-bottom: 20px;
    }

    .btm-title.media {
      margin-bottom: 27px;
    }

    .ant-input {
      width: 540px;
      height: 48px;
      border: 2px solid #e0e0e0;
      border-radius: 10px;
    }
    .ant-input:focus {
      border: 1px solid #e60044;
      box-shadow: unset;
    }
    .smdes {
      font-size: 16px;
      font-family: Galvji;
      font-weight: 400;
      color: #757575;
      line-height: 16px;
      margin-top: 10px;
      margin-bottom: 25px;
    }
    .second.smdes {
      margin-bottom: 60px;
    }
    .third.smdes{
      margin-bottom: 60px;
    }
    .fourth.smdes{
      margin-bottom: 0;
    }
    .linklist {
      width: 290px;
      display: flex;
      margin-bottom: 20px;
      .linkitem {
        width: 40px;
        height: 40px;
        border: 1px solid #E0E0E0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin-right: 9px;
        svg{
          width: 33px;
          height: 33px;
        }
      }
      .active.linkitem{
        border: 1px solid red;
      }
    }

    .activelink {
      border: 1px solid #e60044 !important;
    }
    .img {
      width: 540px;
      height: 244px;
      margin-bottom: 60px;
      border: 1px solid #000;
    }

    .xing {
      font-size: 18px;
      font-family: Galvji;
      font-weight: bold;
      color: rgba(230, 0, 68, 1);
    }
  }

  .ant-input-group-wrapper {
    width: 540px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    .ant-input-group {
      height: 48px;
    }
  }

  .ant-select {
    width: 540px;
    border-radius: 10px;
    margin-top: 18px;
    .ant-select-selector {
      height: 40px;
      line-height: 40px;
      .ant-select-selection-search {
        height: 40px;
        line-height: 40px;
      }
      .ant-select-selection-item {
        height: 40px;
        line-height: 40px;
      }
    }
  }

  .editBtn {
    width: 541px;
    height: 64px;
    background: #e60044;
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 139px;
  }
  .editBtn.disabeld {
    background-color: #f5f5f5;
    border-color: #d9d9d9;
    color: #00000040;
    cursor: not-allowed;
  }
  .ant-upload.ant-upload-select-picture-card {
    width: 110px;
    height: 110px;
  }
  .uploaderwrap {
    .imgwrap {
      border-radius: 50%;
      overflow: hidden;
      position: relative;
      .btntip {
        display: none;
        width: 110px;
        height: 110px;
        position: absolute;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4);
        color: #fff;
      }
    }
    .imgwrap:hover {
      .btntip {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .ant-upload.ant-upload-select-picture-card {
      width: 110px;
      height: 110px;
      border: none;
      background-color: #fff;
    }
  }
  .ant-upload.ant-upload-select-picture-card {
    margin-top: 0;
  }
  .ant-upload.ant-upload-select-picture-card > .ant-upload {
    padding: 0;
  }
}
</style>
